<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

	<head>
		<title>Unicorn Admin</title>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="css/uniform.css" />
		<link rel="stylesheet" href="css/select2.css" />
		<link rel="stylesheet" href="css/unicorn.main.css" />
		<link rel="stylesheet" href="css/unicorn.grey.css" class="skin-color" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>

	<body>

		<div id="header">
			<h1><a href="./dashboard.html">Unicorn Admin</a></h1>
		</div>

		
		<div id="user-nav" class="navbar navbar-inverse">
			<ul class="nav btn-group">
				<li class="btn btn-inverse">
					<a title="" href="#"><i class="icon icon-user"></i> <span class="text">欢迎进入！管理员： ${sessionScope.admin.adminName}</span></a>
				</li>
				
				<li class="btn btn-inverse">
					<a title="" href="login.jsp"><i class="icon icon-share-alt"></i> <span class="text">退出</span></a>
				</li>
			</ul>
		</div>

		<div id="sidebar">
			<a href="#" class="visible-phone"><i class="icon icon-th-list"></i> Tables</a>
			<ul>
				
				<li><a href="index.jsp"><i class="icon icon-th-list"></i>
					<span>首页</span> </a>
			</li>
			
			<li><a href="userManage.jsp"><i class="icon icon-th-list"></i> <span>用户管理</span></a></li>
			
			<li class="submenu">
					<a href="#"><i class="icon icon-th-list"></i> <span>景点管理</span> <span class="label">2</span></a>
					<ul>
						<li><a href="insertScenic.jsp">新增景点</a></li>
						<li><a href="findAllScenic.jsp">维护景点信息</a></li>
						
					</ul>
				</li>
			
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>酒店管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="insert-hotel.jsp">
							<span>新增酒店</span></a></li>
					<li><a href="hotel-management.jsp">
							<span>维护酒店信息</span></a></li>
				</ul>
			</li>
			<li class="submenu">
				<a href="#"><i class="icon icon-th-list"></i> <span>客房管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="room-management.jsp">客房信息维护</a></li>
					<li><a href="insert-room.jsp">新增客房</a></li>
				</ul>
			</li>
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>评论管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="hotel-comment.jsp">
							<span>大众点评酒店</span></a></li>
					<li><a href="scenic-comment.jsp">
							<span>大众点评景点</span></a></li>
				</ul>
			</li>
			<li class="submenu active open"><a href="#"><i class="icon icon-th-list"></i>
					<span>订单管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="findAllHotelOrder.jsp">
							<span>酒店订单</span></a></li>
					<li class="active"><a href="findAllScenicOrder.jsp">
							<span>景点门票订单</span></a></li>
				</ul>
			</li>
				
				
				
			</ul>

		</div>

		<div id="style-switcher">
			<i class="icon-arrow-left icon-white"></i>
			<span>Style:</span>
			<a href="#grey" style="background-color: #555555;border-color: #aaaaaa;"></a>
			<a href="#blue" style="background-color: #2D2F57;"></a>
			<a href="#red" style="background-color: #673232;"></a>
		</div>

		<div id="content">
			<div id="content-header">
				<h1>订单管理</h1>
				
			</div>
			<div id="breadcrumb">
				<a href="#" class="tip-bottom"><i class="icon-home"></i> Home</a>
				<a href="#" class="current">订单管理</a><a href="#" class="current">预订景点信息</a>
			</div>
			<div class="container-fluid">
				<div class="row-fluid">
					<div class="span12">

						<div class="widget-box">
							<div class="widget-title">

								<h5>Dynamic table</h5>
							</div>
							<div class="widget-content nopadding">
								
								<select id="select-pageSize" size="1" name="DataTables_Table_0_length" aria-controls="DataTables_Table_0" style="display: none;">
									<option value="10" selected="selected">10条/页</option>
									<option value="20">20条/页</option>
									<option value="30">30条/页</option>
								</select>
								<div style="float: right;">
								<label><span>用户名：</span> 
								<input type="text" aria-controls="DataTables_Table_0" id="scenicName" value="">
								<button id="search-button" style="margin-top:-10px;">搜索</button></label> 
								</div>
								<table class="table table-bordered " >
									
										<tr>
										    <th style="font-size:16px;">用户名</th>
										    <th style="font-size:16px;">预订景点</th>
											<th style="font-size:16px;">订单编号</th>
											<th style="font-size:16px;">订单价格</th>
											<th style="font-size:16px;">订单时间</th>
											<th style="font-size:16px;">订单状态</th>
										</tr>
										<tbody class="scenic">
<!-- 										<tr> -->
<!-- 											<td>1</td> -->
<!-- 											<td>1</td> -->
<!-- 											<td>1</td> -->
<!-- 											<td>1</td> -->
<!-- 											<td>1</td> -->
<!-- 											<td>1</td> -->
											
<!-- 										</tr> -->
										</tbody>
								</table>
							</div>
						</div>
						<div class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers" id="DataTables_Table_0_paginate">
							<a tabindex="0" class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled" id="DataTables_Table_0_first">首页</a>
							<a tabindex="0" class="previous fg-button ui-button ui-state-default ui-state-disabled" id="DataTables_Table_0_previous">上一页</a>
							<span>
								<a tabindex="0" class="fg-button ui-button ui-state-default ui-state-disabled">1</a>
								<a tabindex="0" class="fg-button ui-button ui-state-default">2</a>
								<a tabindex="0" class="fg-button ui-button ui-state-default">3</a>
								<a tabindex="0" class="fg-button ui-button ui-state-default">4</a>
								<a tabindex="0" class="fg-button ui-button ui-state-default">5</a>
							</span>
							<a tabindex="0" class="next fg-button ui-button ui-state-default" id="DataTables_Table_0_next">下一页</a>
							<a tabindex="0" class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default" id="DataTables_Table_0_last">尾页</a>
						</div>
					</div>
				</div>

				<div class="row-fluid">
					<div id="footer" class="span12">
						2020 &copy; Travel Admin.
					</div>
				</div>
			</div>
		</div>

	
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.ui.custom.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.uniform.js"></script>
		<script src="js/select2.min.js"></script>
		<script src="js/jquery.dataTables.min.js"></script>
		<script src="js/unicorn.js"></script>
		<script src="js/unicorn.tables.js"></script>
	</body>
	
	<script type="text/javascript">
	
	$(document).ready(function(){
		//页面一进入,发起异步请求,景点列表
	 	sendAJAX(1);
		
	 	 // 搜索事件
		 $(document).on("click","#search-button",function(){
			 console.log( $("#scenicName").val());
			// 调用发送请求方法,参数页码
			sendAJAX(1);		
		 });
	 	 
		 // 下拉框改变事件
		 $(document).on("change","#select-pageSize",function(){
			// 调用发送请求方法,参数页码
			 sendAJAX(1);		
	 	  });
		 
		// 首页
		 $(document).on("click","#DataTables_Table_0_first",function(){
			 
			 // 获取当前页码
			 var pageNum = $("#pageInfo").data("pagenum");	 
			 console.log(pageNum);
			 // 判断
			 if(pageNum == 1){
				 alert("已经是首页");		
			 }else{
				 // 调用发送请求方法,参数页码
				 sendAJAX(1);
			 }	
		 });
		 
		 // 上一页
		 $(document).on("click","#DataTables_Table_0_previous",function(){
			 // 获取当前页码
			 var pageNum = $("#pageInfo").data("pagenum") -1;
			 
			 if(pageNum <1){
				 // 拦截请求
				 alert("已经是第一页");
			 }else{
				// 调用发送请求方法,参数页码
				 sendAJAX(pageNum);
			 }
	 	})
	 	
	 	 // 下一页
		 $(document).on("click","#DataTables_Table_0_next",function(){
			 // 获取当前页码
			 var pageNum = eval($("#pageInfo").data("pagenum") + 1);		 
			 // 获取最大页码
			 var pages = $("#pageInfo").data("pages");
			 
			 if(pageNum > pages){
				 // 拦截请求
				 alert("已经是最后一页");
			 }else{
				// 调用发送请求方法,参数页码
				 sendAJAX(pageNum);
			 }
	 	})
	 	
	 	 // 尾页
		 $(document).on("click","#DataTables_Table_0_last",function(){
			 // 获取当前页码
			 var pageNum = $("#pageInfo").data("pagenum");	 
			 // 获取最大页码
			 var pages = $("#pageInfo").data("pages");
		 
			 if(pageNum == pages){
				 // 拦截请求
				 alert("已经是尾页");
			 }
			 // 调用发送请求方法,参数页码
			 sendAJAX(pages);
			
	 	  })
	 	  
	 	  // 页码
		 $(document).on("click",".currents",function(){
			 // 获取当前显示的页码
			 var currentPageNum = $("#pageInfo").data("pagenum");	
			 // 获取当前超链接上表示的页码
			 var pageNum = $(this).text();
			 if(currentPageNum == pageNum){
				 return;
			 }
			// 调用发送请求方法,参数页码
			 sendAJAX(pageNum);		
	 	  });
	});		 
		// 发送AJAX请求 
	    function sendAJAX(pageNum){
	    	 // 获取显示记录数
			 var pageSize = $("#select-pageSize").val();
			 // 获取输入关键字
			 var keyword = $("#scenicName").val();	 
	    	 $.ajax({
	    		 async:true,
	    		 type:"get",
	    		 url:"${pageContext.request.contextPath}/ScenicOrderServlet",
	    		 data:{
	    			 op:"searchByPage",
	    			 pageNum:pageNum,
	    			 pageSize:pageSize,
	    			 keyword:keyword
	    		 },
	    		 dataType:"json",
	    		 success:function(result){
	    			// 调用渲染函数
	    			 showData(result);
	    		 },
	    		 error:function(){
	    			 alert("异步请求失败!");
	    		 }
	    	 });
		}
		//渲染数据到指定Dom元素
		function showData(result){
			var content = "";
			// 没有数据
			 if(result.data.length == 0){
				 $(".scenic").html("无相关数据");
				 $("#DataTables_Table_0_paginate").html("");
			 }else{
			//遍历结果集合
					 for(var i = 0; i < result.data.length; i++){
						 var scenicOrder = result.data[i];
						 content += "<tr>"+
								"<td style=\" text-align:center;vertical-align:middle;\" width=\"100px\" >"+scenicOrder.user.userName+"</td>"+
								"<td style=\" text-align:center;vertical-align:middle;\" width=\"100px\">"+scenicOrder.scenic.scenicName+"</td>"+
								"<td style=\" text-align:center;vertical-align:middle;\" width=\"100px\">"+scenicOrder.scenicOrderId+"</td>"+
								"<td style=\" text-align:center;vertical-align:middle;\" width=\"100px\">"+scenicOrder.scenicOrderPrice+"</td>"+
								"<td style=\" text-align:center;vertical-align:middle;\" width=\"100px\">"+scenicOrder.scenicOrderDatetime+"</td>"+
								"<td style=\" text-align:center;vertical-align:middle;\" width=\"100px\">"+scenicOrder.orderStatus.statusName+"</td>"+								
							"</tr>";
					 }
		 $(".scenic").html(content);
		 
		 //渲染分页信息
		 var pageInfo = "";
		 pageInfo = "<span id=\"pageInfo\" data-pagenum=\""+result.pageNum+"\"  data-pages=\""+result.pages+"\">每页"+result.pageSize+"条 共"+result.total+"条  第"+result.pageNum+"/"+result.pages+"页</span>";
		 if(result.pageNum == 1){
			 pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_first\" disabled=\"disabled\">首页</a>";
			 pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_previous\" disabled=\"disabled\" >上一页</a>";
		 	
		 }else{
			 pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_first\" >首页</a>";
			 pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_previous\"  >上一页</a>";
		 }

		 pageInfo += "<span>";
		 
		 for(var i = 1; i <= result.pages; i++){
			 // 设置当前的页面激活样式
			 if(result.pageNum == i){
				 pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default ui-state-disabled currents\"  >"+i+"</a>";
			 } else{
				 pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default currents\" >"+i+"</a>";
			 }
		 }
		 
		 pageInfo += "</span>";
		 
 		if(result.pageNum == result.pages){
 			 pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_next\" disabled=\"disabled\">下一页</a>";
 			 pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_last\" disabled=\"disabled\">尾页</a>";
		}else{
			 pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_next\">下一页</a>";
			 pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_last\">尾页</a>";
		}
		 
		 $("#DataTables_Table_0_paginate").html(pageInfo);
		}
		}	

	</script>
	
</html>